<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>首次接触three</title>
</head>

<style>
  canvas {
    display: block;
    width: 100%;
    height: 100%;
  }
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>

<body>

  
  <script>
    // 创建场景
    let Scene = new THREE.Scene()
    // 创建相机
    let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
    // 相机远近
    camera.position.z = 5
    // 创建渲染器
    let render = new THREE.WebGLRenderer()
    render.setSize(window.innerWidth, window.innerHeight)
    document.body.appendChild(render.domElement)
    // 创建模型
    let box1 = new THREE.BoxGeometry(1,1,1)
    // 设置材料
    let Mater = new THREE.MeshBasicMaterial({color:0xBCBCFA})
    // 添加光源
    let light = new THREE.PointLight(0xFFFFFF, 1, 100)
    light.position.set(20, 10, 10)
    Scene.add(light)
    // 添加到场景
    let cube = new THREE.Mesh(box1, Mater)
    Scene.add(cube)
    // 渲染
    // render.render(Scene, camera)
    function animate() {
      requestAnimationFrame(animate)
      cube.rotation.x += 0.01
      cube.rotation.y += 0.01
      render.render(Scene, camera)
    }
    animate()
  </script>
</body>
</html>